<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';

  const props = defineProps<{
    tableData: any;
  }>();
  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'PAGEHELPER_ROW_ID',
      key: 'PAGEHELPER_ROW_ID',
      fixed: 'left',
      width: 50,
    },
    {
      title: 'AO号',
      dataIndex: 'aoCode',
      fixed: 'left',
      width: 180,
    },
    {
      title: '分拣状态',
      dataIndex: 'isSort',
      fixed: 'left',
      width: 80,
    },
    {
      title: '配套状态',
      dataIndex: 'state',
      fixed: 'left',
      width: 80,
    },
    {
      title: '配送状态',
      dataIndex: 'status',
      fixed: 'left',
      width: 80,
    },
    {
      title: '图号',
      dataIndex: 'itemCode',
      fixed: 'left',
      width: 200,
    },
    {
      title: '图号名称',
      dataIndex: 'itemName',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '型号',
      dataIndex: 'mProductNumber',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '质量编号',
      dataIndex: 'qualityCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '拆分后合格证号',
      dataIndex: 'newMesCheckQualiticationId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '拆分前合格证号',
      dataIndex: 'mesCheckQualiticationId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '是否带证',
      dataIndex: 'wmsIsPaper',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '配送交接单是否带证',
      dataIndex: 'wmsIsPaper',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '装配图号',
      dataIndex: 'repartAss',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '需求数量',
      dataIndex: 'itemQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '配套数量',
      dataIndex: 'matchQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '分拣数量',
      dataIndex: 'packageCount',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '退库数量',
      dataIndex: 'retrunQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '二次配套数量',
      dataIndex: 'secondMatchQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '机型',
      dataIndex: 'productCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '批次',
      dataIndex: 'batchNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '站位',
      dataIndex: 'station',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '托盘编码',
      dataIndex: 'toolCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '小车编码',
      dataIndex: 'carCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '日计划时间',
      dataIndex: 'dailyTime',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '配送时间',
      dataIndex: 'sendDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '类型',
      dataIndex: 'addType',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '接收备注',
      dataIndex: 'receiveRemark',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: 'wmsItemInventoryId',
      dataIndex: 'wmsItemInventoryId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: 'msAoMatchInfoId',
      dataIndex: 'msAoMatchInfoId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: 'msTaskAoId',
      dataIndex: 'msTaskAoId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '配送交接单ID',
      dataIndex: 'wmsDeliveryPlanId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
  ];
  const scroll = {
    x: 8000,
  };
  const booleanStore = useBooleanStore();
  // 创建一个响应式的本地副本
  const localTableData = ref<any>();
  // 数据库一共有多少条
  const total = ref<number>(1);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(10);
  // 监听props.tableData的变化，并更新本地副本
  watch(
    () => props.tableData,
    () => {
      localTableData.value = props.tableData?.list;
      total.value = props.tableData?.total || 0;
    },
    { immediate: true }
  );
  // 监听页面变化
  watch([pageNum, pageSize], () => {
    booleanStore.setPage(pageNum.value, pageSize.value, 37);
  });
  // 监听已选择数据的序号，并更新到已选择表格数据行字段
  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }
</script>

<template>
  <div>
    <a-table
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="columns"
      :data="localTableData"
      :scroll="scroll"
      row-key="PAGEHELPER_ROW_ID"
    >
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        show-page-size
        @change="change"
        @update:page-size="changeSize"
      />
    </div>
  </div>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
